<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>

    <style>
        .region {
            position: relative;
        }

        .back {
            position: absolute;
        }
    </style>

    <!-- mui -->
    <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css">

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- bootstrap-validate -->
    <link rel="stylesheet" href="./assets/plugins/bootstrap-validator/bootstrapValidator.min.css">

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- city-picker 省市区选择器 -->
    <link rel="stylesheet" href="./assets/plugins/city-picker/city-picker.css">

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/ContactAdd.less" />
</head>

<body>
    <!-- 信息录入 -->
    <div class="back">
        <img src="./assets/images/back.svg" alt="">
    </div>
    <div class="info">
        <h3 class="title wow fadeInUp">分类录入</h3>

        <p class="desc wow fadeInUp" data-wow-delay="200ms">
            您可在本页录入您的分类信息，录入成功后分类将会出现在名片分类页。如需修改名片分类页分类信息，也请新建录入，将会自动替换原有分类。
        </p>
    </div>

    <form class="contact wow fadeInUp" data-wow-delay="300ms" id="add">
        <div class="form-group">
            <label for="typename">分类名</label>
            <input type="text" class="form-control" id="typename" name="typename" placeholder="请输入分类名" />
        </div>
        <div class="action">
            <button class="btn">提交</button>
        </div>
    </form>
</body>

</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- mui -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- bootstrap-validator -->
<script src="./assets/plugins/bootstrap-validator/bootstrapValidator.min.js"></script>

<!-- city-picker -->
<script src="./assets/plugins/city-picker/city-picker.data.min.js"></script>
<script src="./assets/plugins/city-picker/city-picker.min.js"></script>

<!-- axios -->
<script src="./assets/plugins/axios/axios.min.js"></script>

<!-- 用axios封装的request -->
<script src="./assets/plugins/axios/request.js"></script>

<!-- cookie -->
<script src="./assets/plugins/cookie.js"></script>

<!-- helper -->
<script src="./assets/plugins/helper.js"></script>

<script>
    //实例化wow.js
    new WOW().init()

    // 检查是否已经登录
    checkLogin()

    // 读取cookie
    let business = cookie.get('business') ? JSON.parse(cookie.get('business')) : ''

    // 实例化bootstrap-validator验证表单
    $('#add').bootstrapValidator({
        // 填写配置项
        message: '表单内容不能为空',// 所有字段默认错误信息
        // 配置三种状态的图标
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invaild: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        // 设置需要验证字段
        fields: {
            // 姓名
            typename: {
                validators: {
                    notEmpty: {
                        message: '分类名不能为空'
                    }
                }
            }
        }
    }).on('success.form.bv', function (e) {
        // 阻止默认行为
        e.preventDefault();
    })


    // 编辑功能
    // 先获取被编辑的id
    let typeid = location.search ? parseInt(location.search.slice(4)) : ''
    console.log(typeid)
    // 判断typeid是否为空，即判断是否为编辑状态
    if (typeid) {
        Edit()
    }
    // 封装一个异步函数 如果为编辑状态才被调用
    async function Edit() {
        // 获取数据
        let params = {
            businessid: business.id,
            typeid
        }
        let res = await POST({
            url: 'card/type/check',
            params
        })
        console.log(res)
        if (res.code === 1) {
            // 回显数据
            $('#typename').val(res.data.name)
        } else {
            // 名片不存在
            mui.toast(res.msg)
            // code === 0 时回退
            setTimeout(() => {
                history.back()
            }, 2000)
        }
    }

    // 表单提交事件
    $('#add').on('submit', async () => {
        // 获取表单的某个属性
        let bootstrapValidators = $('#add').data('bootstrapValidator')

        // 判断输入内容是否验证失败
        if (!bootstrapValidators.isValid()) {
            // 验证失败就不执行后面代码
            return false
        }

        // 获取需要上传的参数
        let params = {
            businessid: business.id,
            name: $.trim($('#typename').val())
        }

        // 发送请求————如果typeid存在则为编辑状态，如果不存在则为新建状态
        if (typeid) {
            params.typeid = typeid
            let res = await POST({
                url: 'card/type/edit',
                params
            })
            console.log(res)
            if (res.code === 1) {
                mui.toast(res.msg)
                setTimeout(() => {
                    location.href = 'Classification.html'
                }, 2000)
            }
            else {
                mui.toast(res.msg)
            }
            // mui.toast(res.msg)
        } else {
            let res = await POST({
                url: 'card/type/add',
                params
            })
            console.log(res)
            if (res.code === 1) {
                mui.toast(res.msg)
                setTimeout(() => {
                    location.href = 'Classification.html'
                }, 2000)
            }
            else {
                mui.toast(res.msg)
            }
        }
    })

    // 返回按钮
    $('.back').click(() => {
        history.back()
    })

</script>